<template>
    <div style="height: 100%;">
      <vxe-table
        ref="tableRef"
       
        border
        max-height="100%"
        :data="tableData">
        <vxe-column field="id" title="序号" width="70"></vxe-column>
        <vxe-column field="mean" title="均值" sortable></vxe-column>
        <vxe-column field="max" title="max" sortable></vxe-column>
        <vxe-column field="min" title="min" sortable></vxe-column>

 
      </vxe-table>
    </div>
  </template>
  
  <script setup>
  import { ref,defineProps,defineExpose } from 'vue'
  const tableRef = ref()
  const props = defineProps({
    tableData: {
      type: Array,
      required: true,
      validator(value) {
        return value.every(item => {
          return 'id' in item && 'mean' in item && 'max' in item && 'min' in item;
        });
      }
    }
  })
 //父组件触发导出csv文件
 const exportData = (fileName) => {
    const $table = tableRef.value
    if ($table) {
      $table.exportData({
        type: 'csv',
        filename: fileName
      })
    }
  }
  defineExpose({ exportData });  

  </script>
  <style scoped>
    .table-section{
      height: 2rem;
    }
  </style>
  